<template>
    <div class="dispatch-warning">
        <Dispatch-data  v-model="objData"/>
        <div style="padding: 0 16px;background-color: #fff">
            <lar-table
                    model="express.order"
                    canAdd="canAdd"
                    action="base.table.dispatch_warning"
                    class="border">
                <div slot="dispatchWarning" class="dispatch-warning-slot" slot-scope="data">
                    <span style="font-size: 16px;padding-right: 20px">搜索结果</span>
                    <span style="font-size: 13px;padding-right: 20px">共 <span style="color: #009688">{{data.data.totalNum}}</span> 条数据符合条件</span>
                    <el-button type="default" size="mini" class="distrube-btn" @click="seeDistributionMap(data)" style="zoom: 0.9">查看运单分布图</el-button>
                    <!--<el-button type="primary" size="mini" @click="handelPiLiang(data)">批量指派({{data.data.tableSelect.length}})</el-button>-->
                </div>
            </lar-table>
        </div>
    </div>
</template>
<script>
    import DispatchData from './dataShow/DataShow.vue'
    export default {
        components: {
            DispatchData
        },
        data() {
            return {
                objData: {},
                newApi: 'express/order/waring_count',
                checkedOrderId: [],
                selectMode: 1
            }
        },
        computed: {
            dataRefreshDialog() {
                return this.$store.state.num;
            },
        },
        watch: {
            dataRefreshDialog: function(newValue) {
                this.getStatisticsData();
            },
        },
        mounted() {
            this.getStatisticsData();
        },
        methods: {
            seeDistributionMap(val){
                this.checkedOrderId = [];
                if (val.data.tableSelect.length === 0) {
                    this.$message({
                        message: '未选择任何运单',
                        type: 'warning'
                    });
                } else {
                    val.data.tableSelect.forEach(item => {
                        this.checkedOrderId.push(item.id);
                    });
                    this.$router.push({path:'/dialog/see/express.order/' + this.checkedOrderId});
                }
            },
            handelPiLiang(val) {
                // 批量指派
                this.checkedOrderId = [];
                if (val.data.tableSelect.length === 0) {
                    this.$message({
                        message: '未选择任何运单',
                        type: 'warning'
                    });
                } else {
                    val.data.tableSelect.forEach(item => {
                        this.checkedOrderId.push(item.id);
                    });
                    this.$router.push({path:'/dialog/assign/express.order/' + this.checkedOrderId});
                }
            },
            getStatisticsData() {  // 获取统计数据
                this.$http.get(this.newApi)
                    .then((response) => {
                        this.objData = response.data.data;
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },

        }
    }
</script>
<style lang="less" >
    .dispatch-warning{
        margin: 10px;
        .dispatch-early-warning{
            box-sizing: border-box;
            font-size: 16px;
            padding:6px 0 6px 16px;
            margin-bottom: 2px;
            background-color: #fff;
        }
        .dispatch-warning-slot{
            padding: 0px 0 24px 0;
            .el-radio__input.is-checked+.el-radio__label{
                color:#009688;
            }
            .el-radio__input.is-checked .el-radio__inner{
                border-color: #009688;
                background: #009688;
            }
            .distrube-btn{
                background: rgba(0,150,136,0.05);
                border: 1px solid #009688;
                color: #009688;
                margin-right: 15px;
            }
            .distrube-btn:hover{
                color: #5FB878;
                border: 1px solid #5FB878;
            }
        }

    }
</style>

